<template>
    <div class="page">
        <div class="main-title">
            <span>我的账单</span>
        </div>

        <div class="page-ctx">
            <div class="center">
                <div class="tab-box">
                    <div class="tab-list">
                        <div v-for="(item, index) in tabList" :key="index" class="tab-item"
                            :class="tabSelect.value == item.value ? 'active' : ''" @click="do_toggle_tab(item)">
                            {{ item.title }}
                            <span class="number">10</span>
                        </div>
                    </div>
                </div>

                <div class="table-div">
                    <el-table :data="listData" :header-cell-style="{ background: '#F5F5F5' }">
                        <el-table-column prop="date" label="序号"></el-table-column>
                        <el-table-column prop="name" label="订单编号" ></el-table-column>
                        <el-table-column prop="address" label="订单金额" ></el-table-column>
                        <el-table-column prop="address" label="支付方式" ></el-table-column>
                        <el-table-column prop="address" label="状态" ></el-table-column>
                        <el-table-column prop="address" label="结款金额" ></el-table-column>
                        <el-table-column prop="address" label="未结款金额" ></el-table-column>
                        <el-table-column prop="address" label="结款时间" ></el-table-column>
                        <el-table-column prop="address" label="交易时间" ></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { mapState } from "vuex";
export default {
    components: {
    },
    data() {
        return {
            tabSelect: {
                title: "全部",
                value: 0,
            },
            listData:[
                {date:1,name:1,address:2}
            ]
        };
    },
    computed: {
        ...mapState([""]),

        tabList() {
            let list = [
                { value: 0, title: "全部", number_key: "orderNum" },
                { value: 1, title: "未结款", number_key: "orderNeedPay" },
                { value: 2, title: "已结款", number_key: "orderNeedDelivery" },
                { value: 3, title: "部分结款", number_key: "orderNeedShouhuo" },
            ];
            return list;
        },
    },
    created() {
    },
    methods: {
        returnFunc() {
            return this.$router.go(-1);
        },
        do_toggle_tab(){}
    },
};
</script>

<style scoped lang="less">
.page {
    text-align: left;
    padding-bottom: 80px;

    .main-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
        text-align: left;
        height: 56px;
        line-height: 56px;
        background: #ffffff;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;

        button {
            display: flex;
            align-items: center;
            min-width: 96px;
            height: 30px;
            line-height: 30px;
            background: #EF1F1F;
            color: #fff;
            background: #fff;
            color: #000000;
            font-size: 14px;
            // font-weight: bold;

            img {
                width: 20px;
            }

            .el-icon-circle-plus {
                font-size: 18px;
                color: #EF1F1F;
            }

            .add-text {
                margin-left: 5px;
            }
        }
    }

    .main-content {
        height: 124px;
        background-color: #fff;
        border-top: 1px solid #EAEEF1;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .page-ctx {
        margin-top: 24px;
        padding: 32px 32px 55px 32px;
        background: #fff;
        min-height: 500px;
    }

    .tab-box {
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        // border: 1px solid #cccccc;

        .tab-list {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 20px;
            color: #7d7d7d;

            .tab-item {
                position: relative;
                // min-width: 96px;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                height: 48px;
                line-height: 48px;
                cursor: pointer;
                margin-right: 20px;

                .number {
                    color: #333333;
                }

                &.active {
                    // background: #009F39;
                    // color: #fff;
                    // font-weight: bold;
                    // color: #009f39;
                    font-weight: 500;
                    color: #EF1F1F;

                    &::after {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        height: 3px;
                        background: #EF1F1F;
                    }
                    .number {
                        color: #EF1F1F;
                    }
                }
            }
        }
    }

    .table-div{
        margin-top: 24px;
    }
}
</style>